<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>New Balance 品牌大抽奖 - Make Excellent Happen</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #1e3c72 100%);
            min-height: 100vh;
            overflow-x: hidden;
            position: relative;
        }

        /* New Balance 品牌背景动画 */
        .nb-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.05;
            background-image: 
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="40" font-weight="bold" fill="white">NB</text></svg>');
            background-size: 200px 200px;
            animation: bgMove 20s linear infinite;
            z-index: 1;
        }

        @keyframes bgMove {
            0% { transform: translateX(-200px); }
            100% { transform: translateX(100vw); }
        }

        /* 粒子背景动画 */
        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 50%;
            animation: float 8s infinite ease-in-out;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(180deg); }
        }

        /* 主容器 */
        .container {
            position: relative;
            z-index: 10;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* New Balance 品牌头部 */
        .header {
            text-align: center;
            margin-bottom: 30px;
            animation: slideDown 1s ease-out;
            position: relative;
        }

        .nb-logo {
            width: 120px;
            height: 60px;
            margin: 0 auto 20px;
            background: linear-gradient(45deg, #ff0000, #000000);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2rem;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
            animation: logoFloat 3s ease-in-out infinite;
        }

        @keyframes logoFloat {
            0%, 100% { transform: translateY(0px) scale(1); }
            50% { transform: translateY(-10px) scale(1.05); }
        }

        .title {
            font-size: 3rem;
            color: #fff;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            background: linear-gradient(45deg, #ff0000, #ffffff, #000000);
            background-size: 400% 400%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: gradientShift 3s ease-in-out infinite;
        }

        @keyframes gradientShift {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        @keyframes slideDown {
            from { transform: translateY(-50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        .subtitle {
            font-size: 1.3rem;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 10px;
            font-weight: 300;
        }

        .brand-slogan {
            font-size: 1rem;
            color: #ff0000;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-top: 10px;
        }

        /* 控制面板 */
        .control-panel {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            animation: slideUp 1s ease-out 0.3s both;
            border: 2px solid rgba(255, 0, 0, 0.3);
        }

        @keyframes slideUp {
            from { transform: translateY(50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        .input-group {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }

        .input-field {
            padding: 15px 20px;
            border: 2px solid rgba(255, 0, 0, 0.3);
            border-radius: 50px;
            background: rgba(255, 255, 255, 0.9);
            font-size: 1.1rem;
            text-align: center;
            outline: none;
            transition: all 0.3s ease;
            min-width: 200px;
            font-weight: 600;
        }

        .input-field:focus {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(255, 0, 0, 0.4);
            border-color: #ff0000;
        }

        .btn {
            padding: 15px 30px;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
            position: relative;
            overflow: hidden;
        }

        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: left 0.5s;
        }

        .btn:hover::before {
            left: 100%;
        }

        .btn-primary {
            background: linear-gradient(45deg, #ff0000, #cc0000);
            color: white;
            box-shadow: 0 5px 15px rgba(255, 0, 0, 0.4);
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(255, 0, 0, 0.6);
        }

        .btn-primary:disabled {
            background: #999;
            cursor: not-allowed;
            transform: none;
        }

        .btn-secondary {
            background: linear-gradient(45deg, #333, #555);
            color: white;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
        }

        .btn-secondary:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
        }

        /* New Balance 主题转盘区域 */
        .lottery-area {
            display: flex;
            gap: 30px;
            margin-bottom: 30px;
            animation: fadeIn 1s ease-out 0.6s both;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .wheel-container {
            flex: 2;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            padding: 50px;
        }

        /* 外层 New Balance 主题发光环 */
        .wheel-glow {
            position: absolute;
            width: 480px;
            height: 480px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255,0,0,0.2) 0%, transparent 70%);
            box-shadow: 
                0 0 50px rgba(255, 0, 0, 0.5),
                0 0 100px rgba(255, 0, 0, 0.3),
                0 0 150px rgba(255, 0, 0, 0.1),
                inset 0 0 50px rgba(255, 255, 255, 0.1);
            animation: nbPulse 2s ease-in-out infinite;
        }

        @keyframes nbPulse {
            0%, 100% { 
                transform: scale(1); 
                opacity: 0.8;
                box-shadow: 
                    0 0 50px rgba(255, 0, 0, 0.5),
                    0 0 100px rgba(255, 0, 0, 0.3),
                    0 0 150px rgba(255, 0, 0, 0.1);
            }
            50% { 
                transform: scale(1.05); 
                opacity: 1;
                box-shadow: 
                    0 0 60px rgba(255, 0, 0, 0.7),
                    0 0 120px rgba(255, 0, 0, 0.5),
                    0 0 180px rgba(255, 0, 0, 0.3);
            }
        }

        /* New Balance 主题转盘 */
        .lottery-wheel {
            width: 420px;
            height: 420px;
            border-radius: 50%;
            position: relative;
            box-shadow: 
                0 15px 35px rgba(0,0,0,0.4),
                inset 0 5px 15px rgba(255,255,255,0.1),
                0 0 20px rgba(255, 0, 0, 0.3);
            transition: transform 4s cubic-bezier(0.23, 1, 0.32, 1);
            background: linear-gradient(135deg, #ff0000, #ffffff, #000000, #ff0000);
            background-size: 400% 400%;
            animation: nbWheelGradient 3s ease-in-out infinite;
            overflow: hidden;
            border: 5px solid rgba(255, 255, 255, 0.8);
        }

        @keyframes nbWheelGradient {
            0%, 100% { background-position: 0% 50%; }
            25% { background-position: 25% 25%; }
            50% { background-position: 100% 50%; }
            75% { background-position: 75% 75%; }
        }

        /* New Balance 产品扇形区域 */
        .prize-sector {
            position: absolute;
            width: 50%;
            height: 50%;
            transform-origin: 100% 100%;
            overflow: hidden;
            border: 3px solid rgba(255,255,255,0.9);
            box-sizing: border-box;
        }

        .prize-sector:nth-child(1) {
            background: linear-gradient(135deg, #ff0000, rgba(255,0,0,0.8));
            transform: rotate(0deg);
        }

        .prize-sector:nth-child(2) {
            background: linear-gradient(135deg, #000000, rgba(0,0,0,0.8));
            transform: rotate(90deg);
        }

        .prize-sector:nth-child(3) {
            background: linear-gradient(135deg, #ffffff, rgba(255,255,255,0.9));
            transform: rotate(180deg);
        }

        .prize-sector:nth-child(4) {
            background: linear-gradient(135deg, #ff4444, rgba(255,68,68,0.8));
            transform: rotate(270deg);
        }

        .prize-text {
            position: absolute;
            top: 75px;
            left: 30%;
            transform: translateX(-50%) rotate(-45deg);
            color: white;
            font-weight: bold;
            font-size: 1rem;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
            white-space: nowrap;
            animation: nbTextGlow 2s ease-in-out infinite;
        }

        .prize-sector:nth-child(3) .prize-text {
            color: #333;
            text-shadow: 1px 1px 2px rgba(255,255,255,0.8);
        }

        @keyframes nbTextGlow {
            0%, 100% { 
                text-shadow: 2px 2px 4px rgba(0,0,0,0.8), 0 0 15px rgba(255,0,0,0.5); 
            }
            50% { 
                text-shadow: 2px 2px 4px rgba(0,0,0,0.8), 0 0 25px rgba(255,0,0,0.8), 0 0 35px rgba(255,255,255,0.3); 
            }
        }

        .prize-icon {
            position: absolute;
            top: 70px;
            left: 50%;
            transform: translateX(-50%) rotate(-45deg);
            font-size: 2.2rem;
            animation: nbIconBounce 1.5s ease-in-out infinite;
            filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5));
        }

        @keyframes nbIconBounce {
            0%, 100% { transform: translateX(-50%) rotate(-45deg) scale(1); }
            50% { transform: translateX(-50%) rotate(-45deg) scale(1.3); }
        }

        /* New Balance 中心标志 */
        .wheel-center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 120px;
            height: 120px;
            background: linear-gradient(135deg, #ff0000, #cc0000);
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 1.5rem;
            font-weight: bold;
            color: white;
            box-shadow: 
                0 10px 25px rgba(0,0,0,0.4),
                inset 0 3px 8px rgba(255,255,255,0.3),
                0 0 30px rgba(255, 0, 0, 0.6);
            z-index: 10;
            animation: nbCenterPulse 2s ease-in-out infinite;
            border: 4px solid rgba(255, 255, 255, 0.8);
        }

        .nb-center-logo {
            font-size: 1.8rem;
            margin-bottom: 5px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        }

        .nb-center-text {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        @keyframes nbCenterPulse {
            0%, 100% { 
                transform: translate(-50%, -50%) scale(1); 
                box-shadow: 
                    0 10px 25px rgba(0,0,0,0.4),
                    inset 0 3px 8px rgba(255,255,255,0.3),
                    0 0 30px rgba(255, 0, 0, 0.6);
            }
            50% { 
                transform: translate(-50%, -50%) scale(1.1); 
                box-shadow: 
                    0 15px 35px rgba(0,0,0,0.6),
                    inset 0 3px 8px rgba(255,255,255,0.4),
                    0 0 40px rgba(255, 0, 0, 0.8);
            }
        }

        /* New Balance 主题指针 */
        .wheel-pointer {
            position: absolute;
            top: -40px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 25px solid transparent;
            border-right: 25px solid transparent;
            border-bottom: 70px solid #ff0000;
            filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5));
            z-index: 15;
            animation: nbPointerGlow 2s ease-in-out infinite;
        }

        .wheel-pointer::after {
            content: '';
            position: absolute;
            top: 55px;
            left: 50%;
            transform: translateX(-50%);
            width: 15px;
            height: 15px;
            background: #ffffff;
            border-radius: 50%;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.9);
        }

        @keyframes nbPointerGlow {
            0%, 100% { 
                filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5)) drop-shadow(0 0 25px rgba(255, 0, 0, 0.6)); 
            }
            50% { 
                filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5)) drop-shadow(0 0 35px rgba(255, 0, 0, 0.9)); 
            }
        }

        /* New Balance 主题信息面板 */
        .info-panel {
            flex: 1;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 25px;
            color: white;
            border: 2px solid rgba(255, 0, 0, 0.3);
        }

        .prize-pool h3, .participant-info h3 {
            margin-bottom: 15px;
            font-size: 1.3rem;
            color: #ff0000;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .prize-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            padding: 10px;
            background: rgba(255, 0, 0, 0.1);
            border-radius: 10px;
            border-left: 4px solid #ff0000;
        }

        /* 转盘旋转时的 New Balance 特效 */
        .wheel-spinning {
            box-shadow: 
                0 15px 35px rgba(0,0,0,0.4),
                inset 0 5px 15px rgba(255,255,255,0.1),
                0 0 50px rgba(255, 0, 0, 0.8),
                0 0 100px rgba(255, 0, 0, 0.6);
            animation: nbSpinGlow 0.1s ease-in-out infinite;
        }

        @keyframes nbSpinGlow {
            0%, 100% { 
                box-shadow: 
                    0 15px 35px rgba(0,0,0,0.4),
                    inset 0 5px 15px rgba(255,255,255,0.1),
                    0 0 50px rgba(255, 0, 0, 0.8);
            }
            50% { 
                box-shadow: 
                    0 15px 35px rgba(0,0,0,0.4),
                    inset 0 5px 15px rgba(255,255,255,0.1),
                    0 0 70px rgba(255, 0, 0, 1);
            }
        }

        /* New Balance 主题结果显示区域 */
        .result-area {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 30px;
            text-align: center;
            min-height: 200px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            animation: slideUp 1s ease-out 0.9s both;
            position: relative;
            overflow: hidden;
            border: 2px solid rgba(255, 0, 0, 0.3);
        }

        .result-display {
            font-size: 2rem;
            color: white;
            margin-bottom: 20px;
        }

        /* New Balance 主题中奖动画 */
        .winner-animation {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            backdrop-filter: blur(5px);
        }

        .winner-content {
            background: linear-gradient(135deg, #ff0000, #cc0000);
            border-radius: 30px;
            padding: 50px;
            text-align: center;
            color: white;
            box-shadow: 0 20px 50px rgba(0,0,0,0.7);
            transform: scale(0);
            animation: nbWinnerAppear 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
            position: relative;
            overflow: hidden;
            border: 5px solid rgba(255, 255, 255, 0.8);
        }

        @keyframes nbWinnerAppear {
            0% { transform: scale(0) rotate(-180deg); opacity: 0; }
            100% { transform: scale(1) rotate(0deg); opacity: 1; }
        }

        .winner-title {
            font-size: 3rem;
            margin-bottom: 20px;
            animation: nbTextGlow 2s ease-in-out infinite;
            text-shadow: 0 0 20px rgba(255,255,255,0.8);
        }

        .winner-number {
            font-size: 4rem;
            font-weight: bold;
            color: #ffffff;
            margin-bottom: 20px;
            animation: nbNumberBounce 1s ease-in-out infinite;
            text-shadow: 0 0 30px rgba(255,255,255,0.9);
        }

        @keyframes nbNumberBounce {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }

        .winner-prize {
            font-size: 2.5rem;
            color: #ffffff;
            margin-bottom: 30px;
            text-shadow: 0 0 20px rgba(255,255,255,0.7);
        }

        .nb-winner-logo {
            width: 100px;
            height: 50px;
            margin: 20px auto;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: bold;
            animation: logoFloat 2s ease-in-out infinite;
        }

        /* 其他样式保持与之前代码相同... */
        .close-winner {
            position: absolute;
            top: 20px;
            right: 20px;
            background: none;
            border: none;
            color: white;
            font-size: 2rem;
            cursor: pointer;
            opacity: 0.7;
            transition: opacity 0.3s;
        }

        .close-winner:hover {
            opacity: 1;
        }

        .confetti {
            position: fixed;
            width: 10px;
            height: 10px;
            animation: confetti-fall 3s linear infinite;
            z-index: 999;
        }

        @keyframes confetti-fall {
            0% { 
                transform: translateY(-100vh) rotate(0deg) scale(1); 
                opacity: 1; 
            }
            100% { 
                transform: translateY(100vh) rotate(720deg) scale(0); 
                opacity: 0; 
            }
        }

        .history-panel {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 25px;
            margin-top: 20px;
            animation: slideUp 1s ease-out 1.2s both;
            border: 2px solid rgba(255, 0, 0, 0.3);
        }

        .history-list {
            max-height: 300px;
            overflow-y: auto;
            color: white;
        }

        .history-item {
            padding: 15px;
            margin-bottom: 10px;
            background: rgba(255, 0, 0, 0.1);
            border-radius: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            animation: slideInRight 0.5s ease-out;
            border-left: 4px solid #ff0000;
        }

        @keyframes slideInRight {
            from { transform: translateX(100px); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        .loading {
            display: none;
            font-size: 1.5rem;
            color: white;
            animation: pulse 1.5s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        .audio-control {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 100;
        }

        .audio-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: rgba(255, 0, 0, 0.3);
            border: 2px solid rgba(255, 255, 255, 0.5);
            color: white;
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .audio-btn:hover {
            background: rgba(255, 0, 0, 0.5);
            transform: scale(1.1);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .title { font-size: 2rem; }
            .lottery-area { flex-direction: column; }
            .lottery-wheel { width: 350px; height: 350px; }
            .wheel-glow { width: 400px; height: 400px; }
            .input-group { flex-direction: column; align-items: stretch; }
            .input-field, .btn { width: 100%; }
            .winner-content { padding: 30px; }
            .winner-title { font-size: 2rem; }
            .winner-number { font-size: 3rem; }
            .winner-prize { font-size: 2rem; }
            .nb-logo { width: 100px; height: 50px; font-size: 1.5rem; }
        }
    </style>
</head>
<body>
    <!-- New Balance 品牌背景 -->
    <div class="nb-background"></div>

    <!-- 粒子背景 -->
    <div class="particles" id="particles"></div>

    <!-- 音效控制 -->
    <div class="audio-control">
        <button class="audio-btn" id="audioToggle">🔊</button>
    </div>

    <!-- New Balance 主题中奖动画层 -->
    <div class="winner-animation" id="winnerAnimation">
        <div class="winner-content" id="winnerContent">
            <button class="close-winner" id="closeWinner">×</button>
            <div class="nb-winner-logo">NB</div>
            <div class="winner-title">🎉 New Balance 中奖啦！🎉</div>
            <div class="winner-number" id="animationWinnerNumber"></div>
            <div class="winner-prize" id="animationWinnerPrize"></div>
            <div style="font-size: 1.2rem; margin-top: 20px;">
                Make Excellent Happen！
            </div>
        </div>
    </div>

    <!-- 主容器 -->
    <div class="container">
        <!-- New Balance 品牌头部 -->
        <header class="header">
            <div class="nb-logo">NB</div>
            <h1 class="title">🏃‍♂️ New Balance 品牌大抽奖 👟</h1>
            <p class="subtitle">输入您的编号，赢取New Balance精品好礼！</p>
            <div class="brand-slogan">Make Excellent Happen</div>
        </header>

        <!-- 控制面板 -->
        <div class="control-panel">
            <div class="input-group">
                <input type="number" class="input-field" id="participantNumber" 
                       placeholder="输入编号 " min="1" max="1000000000000000000000000000000000000000000000">
                <button class="btn btn-primary" id="startLottery">
                    🎲 开始抽奖
                </button>
                <button class="btn btn-secondary" id="resetSystem">
                    🔄 重置系统
                </button>
            </div>
        </div>

        <!-- New Balance 主题抽奖区域 -->
        <div class="lottery-area">
            <!-- New Balance 主题转盘 -->
            <div class="wheel-container">
                <div class="wheel-glow"></div>
                <div class="wheel-pointer"></div>
                <div class="lottery-wheel" id="lotteryWheel">
                    <div class="prize-sector">
                        <div class="prize-text">NB 经典跑鞋</div>
                        <div class="prize-icon">👟</div>
                    </div>
                    <div class="prize-sector">
                        <div class="prize-text">NB 运动背包</div>
                        <div class="prize-icon">🎒</div>
                    </div>
                    <div class="prize-sector">
                        <div class="prize-text">NB 运动T恤</div>
                        <div class="prize-icon">👕</div>
                    </div>
                    <div class="prize-sector">
                        <div class="prize-text">NB 运动袜</div>
                        <div class="prize-icon">🧦</div>
                    </div>
                    <div class="wheel-center">
                        <div class="nb-center-logo">NB</div>
                        <div class="nb-center-text">Lucky</div>
                    </div>
                </div>
            </div>

            <!-- New Balance 主题信息面板 -->
            <div class="info-panel">
                <div class="prize-pool">
                    <h3>🎁 New Balance 奖品池</h3>
                    <div class="prize-item">
                        <span>👟 NB 经典跑鞋</span>
                        <span id="shoesCount">20</span>
                    </div>
                    <div class="prize-item">
                        <span>🎒 NB 运动背包</span>
                        <span id="bagsCount">20</span>
                    </div>
                    <div class="prize-item">
                        <span>👕 NB 运动T恤</span>
                        <span id="clothesCount">30</span>
                    </div>
                    <div class="prize-item">
                        <span>🧦 NB 运动袜</span>
                        <span id="socksCount">30</span>
                    </div>
                </div>

                <div class="participant-info">
                    <h3>📊 参与统计</h3>
                    <div class="prize-item">
                        <span>剩余编号</span>
                        <span id="remainingNumbers">100</span>
                    </div>
                    <div class="prize-item">
                        <span>已抽奖次数</span>
                        <span id="drawnCount">0</span>
                    </div>
                    <div class="prize-item">
                        <span>剩余奖品</span>
                        <span id="remainingPrizes">100</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 结果显示 -->
        <div class="result-area">
            <div class="result-display" id="resultDisplay">
                准备好了吗？输入您的编号开始New Balance抽奖之旅！
            </div>
            <div class="loading" id="loadingText">
                🏃‍♂️ New Balance 正在为您抽取幸运奖品...
            </div>
        </div>

        <!-- New Balance 主题抽奖历史 -->
        <div class="history-panel">
            <h3 style="color: #ff0000; margin-bottom: 20px;">📜 New Balance 抽奖历史</h3>
            <div class="history-list" id="historyList">
                <div style="text-align: center; color: rgba(255,255,255,0.6);">
                    暂无抽奖记录
                </div>
            </div>
        </div>
    </div>

    <!-- 音频文件 -->
    <!-- <audio id="bgMusic" loop>
        <source src="data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmsbBjmU2fDJdSYELIXP7tiGMggZaLvt559NDAhOqeHwt2McBjiQ1+/Qfy4GL3TA7NuQOwkZaLvt559NDAhOqeHwt2UfBzyN1/LVeSQCMYPM8dyGMgUWZLXn66hVFApGn+DyvmsbBjiS2e/JdSsFLIHO8tiGMggZaLvt559NEAxQp+PwtmMcBjmQ1+/QfywGL3TA7NuQOwkZaLvt559NEAxQp+PwtmMcBjiU2fDJdSUFLIHO8tiGMggZaLvt559NEAxQp+HwtmUdBjOR1/LTeSUEK4DN8N+QQQoTXrTp66hVFAlFn+H0v2wdBj2S2fDNeSMCOIPM8dqGMwUWZLXn66hVFApGn+DyvmsbBjiS2e/JdSsFLIHO8tiGMggZaLvt559NEAxQp+PwtmMcBjiQ1+/QfywGL3TA7NuQOwkZaLvt559NEAxQp+PwtmMcBjiU2fDJdSUFLIHO8tiGMggZaLvt559NEAxQp+HwtmUdBjOR1/LTeSUEK4DN8N+QQQoTXrTp66hVFAlFn+H0v2wdBj2S2fDNeSMCOIPM8dqGMwUWZLXn66hVFApGn+DyvmsbBjiS2e/JdSsFLIHO8tiGMggZaLvt555NDAhOqeHwt2EQA==" type="audio/wav">
    </audio> -->
    
    <audio id="bgMusic" loop>
        <source src="assets/background-music.mp3" type="audio/mpeg">
    </audio>
    <audio id="spinSound">
        <source src="data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmsbBjmU2fDJdSYELIXP7tiGMggZaLvt559NDAhOqeHwt2McBjiQ1+/Qfy4GL3TA7NuQOwkZaLvt559NDAhOqeHwt2UfBzyN1/LVeSQCMYPM8dyGMgUWZLXn66hVFApGn+DyvmsbBjiS2e/JdSsFLIHO8tiGMggZaLvt559NEAxQp+PwtmMcBjmQ1+/QfywGL3TA7NuQOwkZaLvt559NEAxQp+PwtmMcBjiU2fDJdSUFLIHO8tiGMggZaLvt559NEAxQp+HwtmUdBjOR1/LTeSUEK4DN8N+QQQoTXrTp66hVFAlFn+H0v2wdBj2S2fDNeSMCOIPM8dqGMwUWZLXn66hVFApGn+DyvmsbBjiS2e/JdSsFLIHO8tiGMggZaLvt559NEAxQp+PwtmMcBjiQ1+/QfywGL3TA7NuQOwkZaLvt559NEAxQp+PwtmMcBjiU2fDJdSUFLIHO8tiGMggZaLvt559NEAxQp+HwtmUdBjOR1/LTeSUEK4DN8N+QQQoTXrTp66hVFAlFn+H0v2wdBj2S2fDNeSMCOIPM8dqGMwUWZLXn66hVFApGn+DyvmsbBjiS2e/JdSsFLIHO8tiGMggZaLvt555NDAhOqeHwt2EQA==" type="audio/wav">
    </audio>
    <audio id="winSound">
        <source src="data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmsbBjmU2fDJdSYELIXP7tiGMggZaLvt559NDAhOqeHwt2McBjiQ1+/Qfy4GL3TA7NuQOwkZaLvt559NDAhOqeHwt2UfBzyN1/LVeSQCMYPM8dyGMgUWZLXn66hVFApGn+DyvmsbBjiS2e/JdSsFLIHO8tiGMggZaLvt559NEAxQp+PwtmMcBjmQ1+/QfywGL3TA7NuQOwkZaLvt559NEAxQp+PwtmMcBjiU2fDJdSUFLIHO8tiGMggZaLvt559NEAxQp+HwtmUdBjOR1/LTeSUEK4DN8N+QQQoTXrTp66hVFAlFn+H0v2wdBj2S2fDNeSMCOIPM8dqGMwUWZLXn66hVFApGn+DyvmsbBjiS2e/JdSsFLIHO8tiGMggZaLvt559NEAxQp+PwtmMcBjiQ1+/QfywGL3TA7NuQOwkZaLvt559NEAxQp+PwtmMcBjiU2fDJdSUFLIHO8tiGMggZaLvt559NEAxQp+HwtmUdBjOR1/LTeSUEK4DN8N+QQQoTXrTp66hVFAlFn+H0v2wdBj2S2fDNeSMCOIPM8dqGMwUWZLXn66hVFApGn+DyvmsbBjiS2e/JdSsFLIHO8tiGMggZaLvt555NDAhOqeHwt2EQA==" type="audio/wav">
    </audio>

    <script>
        // New Balance 主题抽奖系统核心类
        class NBLotterySystem {
            constructor() {
                this.initializeSystem();
                this.bindEvents();
                this.createParticles();
                this.initializeAudio();
            }

            // 初始化系统数据
            initializeSystem() {
                this.prizes = {
                    shoes: { name: '👟 NB 经典跑鞋', count: 20, emoji: '👟', angle: 0 },
                    bags: { name: '🎒 NB 运动背包', count: 20, emoji: '🎒', angle: 90 },
                    clothes: { name: '👕 NB 运动T恤', count: 30, emoji: '👕', angle: 180 },
                    socks: { name: '🧦 NB 运动袜', count: 30, emoji: '🧦', angle: 270 }
                };

                this.usedNumbers = new Set();
                this.lotteryHistory = [];
                this.isDrawing = false;
                this.audioEnabled = true;

                this.updateDisplay();
            }

            // 绑定事件
            bindEvents() {
                document.getElementById('startLottery').addEventListener('click', () => this.startLottery());
                document.getElementById('resetSystem').addEventListener('click', () => this.resetSystem());
                document.getElementById('audioToggle').addEventListener('click', () => this.toggleAudio());
                document.getElementById('closeWinner').addEventListener('click', () => this.closeWinnerAnimation());
                
                // 回车键快速抽奖
                document.getElementById('participantNumber').addEventListener('keypress', (e) => {
                    if (e.key === 'Enter') this.startLottery();
                });
            }

            // 创建粒子动画
            createParticles() {
                const particlesContainer = document.getElementById('particles');
                for (let i = 0; i < 50; i++) {
                    const particle = document.createElement('div');
                    particle.className = 'particle';
                    particle.style.left = Math.random() * 100 + '%';
                    particle.style.animationDelay = Math.random() * 8 + 's';
                    particle.style.animationDuration = (Math.random() * 3 + 5) + 's';
                    particlesContainer.appendChild(particle);
                }
            }

            // 初始化音频
            initializeAudio() {
                this.bgMusic = document.getElementById('bgMusic');
                this.spinSound = document.getElementById('spinSound');
                this.winSound = document.getElementById('winSound');
                
                // 尝试播放背景音乐（需要用户交互后才能播放）
                document.addEventListener('click', () => {
                    if (this.audioEnabled && this.bgMusic.paused) {
                        this.bgMusic.volume = 0.3;
                        this.bgMusic.play().catch(() => {});
                    }
                }, { once: true });
            }

            // 开始抽奖
            async startLottery() {
                if (this.isDrawing) return;

                const numberInput = document.getElementById('participantNumber');
                const participantNumber = parseInt(numberInput.value);

                // 验证输入
                if (!this.validateInput(participantNumber)) return;

                this.isDrawing = true;
                this.updateButtonState(true);
                this.showLoading(true);

                // 播放转盘音效
                if (this.audioEnabled) {
                    this.spinSound.currentTime = 0;
                    this.spinSound.play().catch(() => {});
                }

                // New Balance 主题转盘动画
                const selectedPrize = await this.spinNBWheel();

                // 抽奖逻辑
                const result = this.drawPrize(participantNumber, selectedPrize);
                
                // 显示New Balance主题中奖动画
                await this.showNBWinnerAnimation(result);

                // 更新数据
                this.updateGameData(participantNumber, result);

                this.isDrawing = false;
                this.updateButtonState(false);
                this.showLoading(false);
                numberInput.value = '';
            }

            // 验证输入
            validateInput(number) {
                if (!number || number < 1 || number > 100000000000000000000000000000000000) {
                    this.showMessage('请输入有效的编号 (1-1000000000000000000000000000000000000000000000000000000)！', 'error');
                    return false;
                }

                if (this.usedNumbers.has(number)) {
                    this.showMessage('该编号已经使用过了！', 'error');
                    return false;
                }

                if (this.getTotalPrizes() === 0) {
                    this.showMessage('所有New Balance奖品已经被抽完了！', 'error');
                    return false;
                }

                return true;
            }

            // New Balance 主题转盘动画
            spinNBWheel() {
                return new Promise(resolve => {
                    const wheel = document.getElementById('lotteryWheel');
                    
                    // 添加New Balance旋转特效
                    wheel.classList.add('wheel-spinning');
                    
                    // 随机选择一个奖品
                    const availablePrizes = this.getAvailablePrizes();
                    const selectedPrizeKey = availablePrizes[Math.floor(Math.random() * availablePrizes.length)];
                    const targetAngle = this.prizes[selectedPrizeKey].angle;
                    
                    // 计算旋转角度 (4-7圈 + 目标角度)
                    const spins = 4 + Math.random() * 3;
                    const finalAngle = (spins * 360) + (360 - targetAngle);
                    
                    wheel.style.transform = `rotate(${finalAngle}deg)`;
                    
                    setTimeout(() => {
                        wheel.classList.remove('wheel-spinning');
                        resolve(selectedPrizeKey);
                    }, 4000);
                });
            }

            // 抽奖逻辑
            drawPrize(participantNumber, selectedPrize) {
                return {
                    participantNumber,
                    prize: selectedPrize,
                    timestamp: new Date()
                };
            }

            // 获取可用奖品列表
            getAvailablePrizes() {
                const available = [];
                Object.keys(this.prizes).forEach(key => {
                    const prize = this.prizes[key];
                    if (prize.count > 0) {
                        // 根据数量增加权重
                        for (let i = 0; i < prize.count; i++) {
                            available.push(key);
                        }
                    }
                });
                return available;
            }

            // 显示New Balance主题中奖动画
            async showNBWinnerAnimation(result) {
                if (!result) return;

                const winnerAnimation = document.getElementById('winnerAnimation');
                const animationNumber = document.getElementById('animationWinnerNumber');
                const animationPrize = document.getElementById('animationWinnerPrize');

                // 设置中奖信息
                animationNumber.textContent = `编号 ${result.participantNumber}`;
                animationPrize.textContent = this.prizes[result.prize].name;

                // 显示动画
                winnerAnimation.style.display = 'flex';

                // 播放中奖音效
                if (this.audioEnabled) {
                    this.winSound.currentTime = 0;
                    this.winSound.play().catch(() => {});
                }

                // New Balance主题特效
                this.createNBConfetti();
                this.createNBScreenShake();
            }

            // New Balance主题撒花效果
            createNBConfetti() {
                const nbColors = ['#ff0000', '#000000', '#ffffff', '#cc0000'];
                
                for (let i = 0; i < 150; i++) {
                    setTimeout(() => {
                        const confetti = document.createElement('div');
                        confetti.className = 'confetti';
                        confetti.style.left = Math.random() * 100 + '%';
                        confetti.style.backgroundColor = nbColors[Math.floor(Math.random() * nbColors.length)];
                        confetti.style.animationDelay = Math.random() * 2 + 's';
                        confetti.style.animationDuration = (Math.random() * 2 + 3) + 's';
                        
                        document.body.appendChild(confetti);

                        setTimeout(() => {
                            confetti.remove();
                        }, 5000);
                    }, i * 15);
                }
            }

            // New Balance主题屏幕震动效果
            createNBScreenShake() {
                const container = document.querySelector('.container');
                container.style.animation = 'shake 0.6s ease-in-out';
                
                setTimeout(() => {
                    container.style.animation = '';
                }, 600);
            }

            // 关闭中奖动画
            closeWinnerAnimation() {
                const winnerAnimation = document.getElementById('winnerAnimation');
                winnerAnimation.style.display = 'none';
            }

            // 更新游戏数据
            updateGameData(participantNumber, result) {
                // 标记编号已使用
                this.usedNumbers.add(participantNumber);

                // 减少奖品数量
                if (result && this.prizes[result.prize]) {
                    this.prizes[result.prize].count--;
                }

                // 添加到历史记录
                this.lotteryHistory.unshift(result);
                if (this.lotteryHistory.length > 20) {
                    this.lotteryHistory.pop();
                }

                // 更新显示
                this.updateDisplay();
                this.updateHistory();
            }

            // 更新显示信息
            updateDisplay() {
                document.getElementById('shoesCount').textContent = this.prizes.shoes.count;
                document.getElementById('bagsCount').textContent = this.prizes.bags.count;
                document.getElementById('clothesCount').textContent = this.prizes.clothes.count;
                document.getElementById('socksCount').textContent = this.prizes.socks.count;

                document.getElementById('remainingNumbers').textContent = 100 - this.usedNumbers.size;
                document.getElementById('drawnCount').textContent = this.usedNumbers.size;
                document.getElementById('remainingPrizes').textContent = this.getTotalPrizes();
            }

            // 更新历史记录
            updateHistory() {
                const historyList = document.getElementById('historyList');
                
                if (this.lotteryHistory.length === 0) {
                    historyList.innerHTML = '<div style="text-align: center; color: rgba(255,255,255,0.6);">暂无抽奖记录</div>';
                    return;
                }

                historyList.innerHTML = this.lotteryHistory.map((record, index) => `
                    <div class="history-item" style="animation-delay: ${index * 0.1}s;">
                        <div>
                            <strong>编号 ${record.participantNumber}</strong>
                            <div style="font-size: 0.9rem; opacity: 0.8;">
                                ${record.timestamp.toLocaleTimeString()}
                            </div>
                        </div>
                        <div style="font-size: 1.2rem;">
                            ${this.prizes[record.prize].emoji} ${this.prizes[record.prize].name}
                        </div>
                    </div>
                `).join('');
            }

            // 获取剩余奖品总数
            getTotalPrizes() {
                return Object.values(this.prizes).reduce((total, prize) => total + prize.count, 0);
            }

            // 显示消息
            showMessage(message, type = 'info') {
                const resultDisplay = document.getElementById('resultDisplay');
                const originalText = resultDisplay.textContent;
                
                resultDisplay.textContent = message;
                resultDisplay.style.color = type === 'error' ? '#e74c3c' : '#ff0000';
                
                setTimeout(() => {
                    resultDisplay.textContent = originalText;
                    resultDisplay.style.color = 'white';
                }, 3000);
            }

            // 更新按钮状态
            updateButtonState(disabled) {
                const button = document.getElementById('startLottery');
                button.disabled = disabled;
                button.textContent = disabled ? '🎲 抽奖中...' : '🎲 开始抽奖';
            }

            // 显示/隐藏加载动画
            showLoading(show) {
                const loading = document.getElementById('loadingText');
                const resultDisplay = document.getElementById('resultDisplay');
                
                if (show) {
                    loading.style.display = 'block';
                    resultDisplay.style.display = 'none';
                } else {
                    loading.style.display = 'none';
                    resultDisplay.style.display = 'block';
                }
            }

            // 重置系统
            resetSystem() {
                if (confirm('确定要重置整个New Balance抽奖系统吗？这将清除所有数据！')) {
                    this.initializeSystem();
                    this.updateHistory();
                    
                    // 重置转盘
                    document.getElementById('lotteryWheel').style.transform = 'rotate(0deg)';
                    
                    // 关闭中奖动画
                    this.closeWinnerAnimation();
                    
                    this.showMessage('New Balance抽奖系统重置成功！', 'info');
                }
            }

            // 切换音效
            toggleAudio() {
                this.audioEnabled = !this.audioEnabled;
                const button = document.getElementById('audioToggle');
                
                if (this.audioEnabled) {
                    button.textContent = '🔊';
                    if (this.bgMusic.paused) {
                        this.bgMusic.play().catch(() => {});
                    }
                } else {
                    button.textContent = '🔇';
                    this.bgMusic.pause();
                }
            }
        }

        // 添加震动动画
        const shakeKeyframes = `
            @keyframes shake {
                0%, 100% { transform: translateX(0); }
                10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
                20%, 40%, 60%, 80% { transform: translateX(8px); }
            }
        `;
        
        const style = document.createElement('style');
        style.textContent = shakeKeyframes;
        document.head.appendChild(style);

        // 页面加载完成后初始化New Balance抽奖系统
        document.addEventListener('DOMContentLoaded', () => {
            new NBLotterySystem();
            
            // 添加页面加载动画
            document.body.style.opacity = '0';
            document.body.style.transition = 'opacity 1s ease-in-out';
            
            setTimeout(() => {
                document.body.style.opacity = '1';
            }, 100);
        });

        // 阻止右键菜单（可选）
        document.addEventListener('contextmenu', e => e.preventDefault());
    </script>
</body>
</html>
